<template>
  <div class="page-demo">
    <co-header id="co-header" title="休假管理">
      <!--头部左侧内容区域-->
      <div slot="left">
        <div @click="backProtal()">  
          <i class="coicon coicon-back"></i>
        </div>
      </div>
    </co-header>
    <transition
     enter-active-class="animated slideInRight"
     leave-active-class="animated slideOutLeft">
      <router-view></router-view>
    </transition>
    <co-tabbar v-model='tab' fixed>
      <co-tab-item id='home'>
        <i class="coicon coicon-order" slot='icon'></i>
      </co-tab-item>
      <co-tab-item id='stat'>
        <i class="coicon coicon-dynamic" slot='icon'></i>
      </co-tab-item>
    </co-tabbar>
  </div>
</template>
<script>
export default{
  data() {
    return {
      tab: 'home'
    };
  },
  watch: {
    tab(path) {
      this.$router.replace({
        path
      });
    }
  },
  methods: {
    backProtal: function() {
      corWidget.finishWidget(); // eslint-disable-line
    }
  }
};
</script>
<style>
  body {
    background-color: #efefef;
    height: 100%;
  }

  .co-header {
    background-color: #da4654;

    font-weight: bold;
  }

  .co-header-title {
    color: #fff;
    font-size: 1.2rem;
    height: 2.2rem;
    line-height: 2.2rem;
  }

  .co-header-button {
    color: #fff;
  }

  .co-navbar .co-tab-item.is-selected {
    border-bottom-color: #da4654;
    color: #da4654;
  }

  .co-tabbar.is-fixed {
    z-index: 2;
  }
  .co-tabbar > .co-tab-item.is-selected {
    color: #da4654;    
  }
  .co-tabbar .coicon {
    font-size: 1.6rem;
  }
    
  #main {
    position: absolute;
    top: 44px;

    width: 100%;
    height: calc(100vh - 44px - 43px);
  }  
</style>
